<template>
  <div class="container">
    <!-- 修改、添加表单 -->
    <el-form
      :model="formData"
      label-width="80px"
      :rules="formRules"
      ref="formData"
      class="operateForm"
      v-if="eventType === 'add' || eventType === 'update'"
    >
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item prop="nickname" label="姓名">
            <el-input
              v-model.trim="formData.nickname"
              placeholder="请输入"
              class="proInputWidth"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item prop="tel" label="手机号">
            <el-input
              v-model.trim="formData.tel"
              placeholder="可用于自助修改和找回密码"
              class="proInputWidth"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="formData.username"
              placeholder="建议使用姓名拼音"
              :disabled="isDisabled"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="登录密码" prop="password">
            <el-input
              v-model="formData.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item label="用户类型" prop="type">
            <el-select
              v-model="formData.type"
              placeholder="请选择"
              clearable
              filterable
              @change="selectType"
            >
              <el-option
                v-for="item in typeIds"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="用户状态" prop="enabled">
            <el-select
              v-model="formData.enabled"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in status"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <el-form-item label="行政区划" prop="areaId">
            <el-cascader
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              placeholder="请选择"
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="项目授权" prop="devType" v-if="isShowProject">
            <el-row>
              <el-select
                ref="operateSearch"
                v-model="formData.devType"
                clearable
                filterable
                placeholder="请输入项目名称进行搜索"
                @change="selectChanged"
                @focus="selectIsAreaId"
                @clear="clearChanged"
                :filter-method="selectChange"
              >
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.projectName"
                  :value="index"
                ></el-option>
                <div class="block">
                  <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    :current-page.sync="pageNo"
                    :page-size="pageSizeNumber"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  ></el-pagination>
                </div>
              </el-select>
            </el-row>
            <el-row>
              <ul class="projectAuthorization">
                <li v-for="(tag, index) in tags" :key="index" class="TagList">
                  <div class="projectAuthorizationTag" :title="tag.projectName">
                    {{ tag.projectName }}
                  </div>
                  <div class="tagClose">
                    <i class="el-icon-close" @click="handleClose(tag)"></i>
                  </div>
                </li>
              </ul>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2" v-if="isShowIndustry">
          <el-form-item label="主管行业" prop="industryId">
            <el-select
              class="selectWidth"
              v-model="formData.industryId"
              filterable
              placeholder="请选择"
              clearable
              multiple
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in industry"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2" v-if="isShowBank">
          <el-form-item label="银行授权" prop="bankId">
            <el-select
              class="selectWidth"
              v-model="formData.bankId"
              filterable
              placeholder="请选择"
              clearable
              @change="bankSelChange"
            >
              <el-option
                v-for="item in bankList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3" v-if="isShowBank">
          <el-form-item label="银行网点">
            <el-select
              class="selectWidth"
              v-model="formData.bankSiteId"
              filterable
              placeholder="请选择"
              clearable
              @focus="handleVisibleChange"
            >
              <el-option
                v-for="item in bankOutlets"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-tooltip
              content="Top center"
              placement="top"
              effect="dark"
              style="position: absolute; top: 0px; right: -20px"
            >
              <div slot="content">
                用于创建网点账号，可选择银行端已添加的网点
              </div>
              <i class="icon iconfont iconhuabanfuben"></i>
            </el-tooltip>
            <div style="color: #f56c6c; font-size: 12px">
              {{ this.bankOutletsError }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2"></el-col>
      </el-row>
      <el-row class="alignCenter">
        <el-button
          class="commonBut saveBtn"
          type="primary"
          @click="saveEvent"
          v-show="isShowSave"
          :loading="isLoading"
          >保存</el-button
        >
        <el-button class="commonBut" @click="cancelEdit">取消</el-button>
      </el-row>
    </el-form>
    <!-- 详情 -->
    <el-row class="detailBox" v-else>
      <el-row>
        <el-col :span="8" :offset="3">
          <label>姓名：</label>
          <span>{{ adminDetail.nickname || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2">
          <label>手机号：</label>
          <span>{{ adminDetail.tel || '--' }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <label>用户名：</label>
          <span>{{ adminDetail.username || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2">
          <label>登录密码：</label>
          <span>{{ '******' }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <label>用户类型：</label>
          <span>{{ adminDetail.typeDesc || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2">
          <label>用户状态：</label>
          <span>{{ adminDetail.enabledDesc || '--' }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="3">
          <label>行政区划：</label>
          <span>{{ adminDetail.areaName || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2" v-if="isShowIndustry">
          <label>主管行业：</label>
          <span>{{
            adminDetail.industryNames
              ? adminDetail.industryNames.join('、')
              : '--'
          }}</span>
        </el-col>
        <el-col :span="8" :offset="2" v-if="isShowBank">
          <label>授权银行：</label>
          <span>{{ adminDetail.bankName || '--' }}</span>
        </el-col>
      </el-row>
      <el-row v-if="isShowBank">
        <el-col :span="8" :offset="3">
          <label>银行网点：</label>
          <span>{{ adminDetail.bankSiteName || '--' }}</span>
        </el-col>
        <el-col :span="8" :offset="2"></el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'userAccount',

  props: ['eventType', 'id', 'typeDesc', 'bankSiteId'],
  data() {
    //验证密码
    var validatePass = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value.length < 6 || value.length > 18) {
          callback(new Error('密码长度应为6-18位'))
        } else {
          var regPass = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]a-zA-Z0-9]{6,18}$/
          if (!regPass.test(value)) {
            callback(new Error('密码仅支持数字、字母、符号组合，不支持空格'))
          } else {
            callback()
          }
        }
      }
    }
    var validateName = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        if (value.length < 6 || value.length > 18) {
          callback(new Error('用户名为6-18位字母、数字、下划线_，不能是纯数字'))
        } else {
          var regName = /(?![0-9]+$)[0-9a-zA-Z_]{6,18}/
          if (!regName.test(value)) {
            callback(
              new Error('用户名为6-18位字母、数字、下划线_，不能是纯数字')
            )
          } else {
            callback()
          }
        }
      }
    }
    var checkdevType = (rule, value, callback) => {
      var that = this
      var devTypeValue = that.tags
      setTimeout(function () {
        if (devTypeValue.length == 0) {
          return callback(new Error('授权项目不能为空'))
        } else {
          callback()
        }
      }, 100)
    }
    var validateindustryId = (rule, value, callback) => {
      if (this.formData.industryId.length == 0) {
        return callback(new Error('主管行业不能为空'))
      } else {
        callback()
      }
    }
    return {
      tags: [],
      textarea: '',
      options: [],
      total: 0,
      pageNo: 1,
      pageSizeNumber: 20,
      projectSelect: '',
      titleText: '用户管理',
      formData: {
        username: '',
        password: '',
        type: '',
        enabled: '',
        areaId: '',
        industryId: [],
        nickname: '', //姓名
        tel: '', //项目经理身份证号
        bankId: '', //授权银行
        devType: '', //项目授权
        bankSiteId: '', //银行网点
      },
      formRules: {
        // username: [{
        //     required: true,
        //     message: "用户名为6-18位字母、数字、下划线_，不能是纯数字",
        //     pattern: /(?![0-9]+$)[0-9a-zA-Z_]{6,18}/,
        //     trigger: "blur"
        //   }],
        nickname: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur',
          },
        ],
        tel: [
          {
            required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        username: [
          { required: true, validator: validateName, trigger: 'blur' },
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' },
        ],
        type: [
          { required: true, message: '用户类型不能为空', trigger: 'change' },
        ],
        enabled: [
          { required: true, message: '用户状态不能为空', trigger: 'change' },
        ],
        areaId: [
          { required: true, message: '行政区划不能为空', trigger: 'change' },
        ],
        industryId: [
          { required: true, validator: validateindustryId, trigger: 'change' },
        ],
        bankId: [
          { required: true, message: '授权银行不能为空', trigger: 'change' },
        ],
        devType: [
          { required: true, validator: checkdevType, trigger: 'change' },
        ],
      },
      isLoading: false,
      adminDetail: {},
      areaId: [],
      industry: [], //所属行业
      typeIds: [], //用户类型
      status: [], //用户状态
      oldPassword: '',
      isDisabled: false,
      isShowIndustry: false,
      isShowDetailIndustry: false,
      isShowProject: false,
      canceltype: '',
      //eventType:'detail',
      isShowSave: '',
      projectId: '',
      searchText: '',
      isShowBank: false,
      isAreaId: false,
      bankList: '',
      bankOutlets: '',
      bankOutletsError: '',
    }
  },
  created() {
    //获取用户详情
    if (this.id) {
      if (this.typeDesc == '行业主管') {
        this.isShowIndustry = true
      } else {
        this.isShowIndustry = false
      }

      if (this.typeDesc == '银行') {
        this.isShowBank = true
      } else {
        this.isShowBank = false
      }
      this.getAdminDetail()
      this.isDisabled = true
    }
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getTypeList()
    this.getBankList()
    this.getUsertype()
    this.getUserstatus()
    this.isShowSave =
      this.$store.state.buttonLimitsArr.indexOf('user:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('user:update') > -1
  },
  computed: { ...mapState(['areasOptions']) },
  methods: {
    ...mapActions(['getAreas']),
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.getLikeproject(
        val,
        this.pageSizeNumber,
        this.formData.devType,
        this.formData.areaId
      )
    },
    selectChange(val) {
      this.searchText = val
      this.projectSelect = val
      this.getLikeproject(1, this.pageSizeNumber, val, this.formData.areaId)
      if (typeof this.formData.devType === 'string') {
        this.formData.devType = val
      }
      this.formData.devType = val
    },
    handleClose(name) {
      const vm = this
      const index = this.tags.indexOf(name)
      vm.tags.splice(index, 1)
    },
    selectChanged(value) {
      const vm = this
      // 自动获取焦点
      vm.$nextTick(() => {
        vm.$refs.operateSearch.blur()
      })
      var itemTags = vm.options[vm.formData.devType]
      let index = vm.tags.findIndex((item) => {
        if (item.projectName === itemTags.projectName) {
          return true
        } else {
          return false
        }
      })
      if (index == -1) {
        if (itemTags) {
          var obj = {}
          obj.projectName = itemTags.projectName
          obj.projectId = itemTags.id
          vm.tags.pushNoRepeat(obj)
        }
      }
      vm.formData.devType = ' '
    },
    unique(arr) {
      return arr.filter(function (item, index, arr) {
        return arr.indexOf(item, 0) === index
      })
    },
    selectIsAreaId() {
      const vm = this
      if (!vm.isAreaId) {
        vm.$message({
          type: 'error',
          message: '请先选择行政区域',
        })
      } else {
        vm.selectChange(vm.searchText)
      }
    },
    clearChanged() {
      const vm = this
      if (!vm.isAreaId) {
        vm.$message({
          type: 'error',
          message: '请先选择行政区域',
        })
      } else {
        vm.searchText = ' '
        vm.getLikeproject(1, this.pageSizeNumber, ' ', this.formData.areaId)
      }
    },
    //返回
    goBack() {},
    //保存事件
    saveEvent() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          this.isLoading = true
          this.submitFormUptate()
        } else {
          return false
        }
      })
    },
    submitFormUptate() {
      var industry, passwordVal, urlVal
      if (
        this.formData.type == 'MONITOR' ||
        this.formData.type == 'AREAMANAGE'
      ) {
        industry = []
      } else {
        industry = this.formData.industryId || []
      }
      var data = {
        username: this.formData.username,
        // password: passwordVal,
        type: this.formData.type,
        enabled: this.formData.enabled,
        areaId: this.formData.areaId,
        // industryId: industry,
        nickname: this.formData.nickname,
        tel: this.formData.tel,
        phone: this.formData.tel,
        bankId: this.formData.bankId,
        bankSiteId: this.formData.bankSiteId,
        userProjectJson: JSON.stringify(this.tags),
      }

      if (this.id || this.projectId) {
        data.passwordVal = this.oldPassword
        if (this.formData.type != 'CHIEF') {
          urlVal = 'api-u/users/editaccount'
          if (industry.length > 0) {
            data.industryIdStrs = industry.join(',')
          }
        } else {
          urlVal = 'api-u/users/modify/chief'
        }
        data.industryId = industry
      } else if (this.formData.type == 'CHIEF') {
        data.passwordVal = this.formData.password
        urlVal = 'api-u/users/add/chief'
        data.industryId = industry
      } else {
        data.password = this.formData.password
        urlVal = 'api-u/users-anon/register'
        if (industry.length > 0) {
          data.industryIdStrs = industry.join(',')
        }
      }

      if (this.id || this.projectId) {
        data.id = this.id || this.projectId
        data.newPassword =
          this.formData.password == '******' ? '' : this.formData.password
      }
      this.axios({
        method: 'post',
        url: urlVal,
        data: data,
      })
        .then((response) => {
          this.isLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            if (
              urlVal == 'api-u/users-anon/register' ||
              urlVal == 'api-u/users/add/chief'
            ) {
              this.projectId = response.data.result
            }
            setTimeout(() => {
              // if(this.id){
              this.$emit(
                'eventTypeChanged',
                'detail',
                this.id || this.projectId
              )
              this.getAdminDetail()
              this.isDisabled = true
              // }else {
              //     this.$router.push({
              //         path:"/home/baseSettings/userManageList",
              //         name: "userManageList",
              //     });
              //     this.$store.commit("CHANGE_SLIDER_NAME", {oldUrl:"/home/baseSettings/userManageList",newUrl:this.$router.currentRoute.fullPath});
              // }
            }, 1500)
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isLoading = false
          }
        })
        .catch((err) => {
          this.$message.error('保存失败')
          this.isLoading = false
        })
    },
    cancelEdit() {
      if (this.eventType == 'update') {
        if (
          this.canceltype == 'AREAMANAGE' ||
          this.canceltype == 'MONITOR' ||
          this.canceltype == 'BANK'
        ) {
          this.isShowIndustry = false
        } else {
          this.isShowIndustry = true
        }
        this.$emit('eventTypeChanged', 'detail', this.id || this.projectId)
        this.getAdminDetail()
      } else {
        this.$router.push({
          path: '/home/baseSettings/userManageList',
          name: 'userManageList',
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/baseSettings/userManageList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //获取用户详情
    getAdminDetail() {
      this.axios({
        method: 'post',
        url: 'api-u/users/detail',
        data: {
          id: this.id || this.projectId,
          // bankSiteId:this.bankSiteId || ''
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.oldPassword = response.data.result.password
              this.adminDetail = response.data.result
              this.formData = response.data.result
              this.areaId = response.data.result.areaId

              this.formData.type = response.data.result.type
              this.formData.enabled = response.data.result.enabled
              this.formData.areaId = response.data.result.areaId
              this.formData.bankId = response.data.result.bankId
              this.formData.tel = response.data.result.tel
              this.formData.password = '******'
              this.formData.bankSiteId = response.data.result.bankSiteId
              if (response.data.result.industryIds) {
                this.formData.industryId = response.data.result.industryIds
              }

              this.canceltype = response.data.result.type

              this.tags = this.getData(response.data.result.userProjects)
              if (this.formData.areaId) {
                this.isAreaId = true
              } else {
                this.isAreaId = false
              }
              // this.getAreaId()
              this.selectType(this.canceltype)
              this.getLikeproject(
                this.pageNo,
                this.pageSizeNumber,
                ' ',
                this.formData.areaId
              )
              this.getBankOutlets(response.data.result.bankId)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //转换数据
    getData(tree = []) {
      let arr = []
      if (!!tree && tree.length !== 0) {
        tree.forEach((item) => {
          let obj = {}
          obj.projectName = item.projectName
          obj.projectId = item.projectId
          arr.push(obj)
        })
      }
      return arr
    },
    //获取选中的区域最后一级id
    getAreaId() {
      this.formData.areaId = this.areaId[this.areaId.length - 1]
      if (this.formData.areaId) {
        this.isAreaId = true
      } else {
        this.isAreaId = false
      }
    },
    getTypeList() {
      this.axios({
        method: 'post',
        data: { type: 'INDUSTRY' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.industry = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getBankList() {
      this.axios({
        method: 'post',
        data: { type: 'BANK_TYPE' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.bankList = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getBankOutlets(val) {
      this.axios({
        method: 'post',
        data: { bankId: val },
        url: 'api-acc/accountbank/expand/banksite',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.bankOutlets = response.data.result
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    bankSelChange(val) {
      this.getBankOutlets(val)
      this.formData.bankSiteId = ''
    },
    handleVisibleChange(val) {
      if (!this.formData.bankId) {
        this.bankOutletsError = '请先选择银行授权'
      } else {
        this.bankOutletsError = ''
      }
    },
    getUsertype() {
      this.axios({
        method: 'post',
        url: 'api-u/users/usertype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.typeIds = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getUserstatus() {
      this.axios({
        method: 'post',
        url: 'api-u/users/userstatus',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.status = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getLikeproject(pageNo, pageSizeNumber, val, areaId) {
      const vm = this
      vm.axios({
        method: 'post',
        url: 'api-p/project/expand/likeproject',
        data: {
          pageNo: pageNo,
          pageSize: pageSizeNumber,
          areaId: areaId,
          projectName: val,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              vm.options = response.data.result.results
              vm.total = response.data.result.total
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    selectType(value) {
      if (value == 'DIRECTOR') {
        this.isShowIndustry = true
        // this.formData.industryId = ['02'];
      } else {
        this.isShowIndustry = false
      }
      //授权银行
      if (value == 'BANK') {
        this.isShowBank = true
      } else {
        this.isShowBank = false
      }
      //主管部门
      if (value == 'CHIEF') {
        this.isShowProject = true
      } else {
        this.isShowProject = false
      }
    },
    handleSelectChange(e) {
      this.formData.industryId = e
      this.$forceUpdate()
      this.$refs.formData.validateField('industryId')
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    top: 197px;
    .operateForm {
      margin-top: 50px;
      .alignCenter {
        margin-top: 50px;
      }
      .el-select {
        width: 100%;
      }
    }
    .detailBox {
      margin-top: 50px;
      .el-row {
        margin-bottom: 22px;
        height: 40px;
        line-height: 40px;
        label {
          width: 80px;
          display: inline-block;
          text-align: right;
          font-size: 14px;
          color: #606266;
        }
      }
    }
    .operateBtn {
      width: auto;
      padding: 0 15px;
    }
    .el-cascader {
      width: 100%;
    }
  }
  /deep/.el-form-item__error {
    position: relative;
  }
}
.projectAuthorization {
  width: 100%;
  height: 200px;
  padding: 10px 20px;
  background-color: #f5f7fa;
  border: 1px solid #dee5f4;
  margin-top: 10px;
  overflow-y: auto;
  .TagList {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    .projectAuthorizationTag {
      width: calc(100% - 20px);
      display: block;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      float: left;
    }
    .tagClose {
      float: left;
      cursor: pointer;
      line-height: 41px;
    }
    .tagClose:hover {
      color: red;
    }
  }
  .TagList:hover {
    background: #e4ebf1;
  }
}
</style>
